<template>
    <div class="people">
       <div class="people-flex">
           <div class="people-main">
               <div class="people-main-list">
                   <h3 class="people-main-list-title">出游人数</h3>
                   <div class="people-main-list-item">
                       <div class="people-main-list-item-title">成人：</div>
                       <div class="people-main-list-item-choose-but" @click="subNum('adultNum')">－</div>
                       <input class="people-main-list-item-choose-num" v-model="this.adultNum" readonly></input>
                       <div class="people-main-list-item-choose-but" @click="addNum('adultNum')">＋</div>
                   </div>
                   <div class="people-main-list-item">
                       <div class="people-main-list-item-title">儿童：</div>
                       <div class="people-main-list-item-choose-but" @click="subNum('childNum')">－</div>
                       <input class="people-main-list-item-choose-num"  v-model="this.childNum" readonly></input>
                       <div class="people-main-list-item-choose-but" @click="addNum('childNum')">＋</div>
                   </div>
                   <h3 class="people-main-list-bottom" @click="closed">确定</h3>
               </div>
           </div>
       </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    export default {
        name: "PeopleNum",
        data(){
            return{
                adultNum:0,
                childNum:0,
            }
        },
        props:['num'],
        methods: {
            // 减少购买量
            subNum(index) {
                if ( this[index] <= 0) {
                    Toast({
                        message: '不能小于0',
                        duration: 1000
                    });
                } else {
                    --this[index];
                }
            },
            //增加数量
            addNum(index) {
                ++this[index];
            },

            closed(){
                this.$emit('peopleSelect',{"adultNum":this.adultNum,"childNum":this.childNum})
            }
        },
        mounted(){
            this.adultNum=this.num[0]
            this.childNum=this.num[1]
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .people{
        position: fixed;
        background: rgba(0,0,0,.5);
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        z-index: 999;
        &-flex{
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        &-main{
            position: relative;
            padding: rpx(30);
            margin: auto;
            background: $color0;
            width: rpx(500);
            &-list {
                &-title {
                    padding: rpx(30) 0;
                    border-bottom: solid 1px $color2;
                    font-size: rpx(24);
                    font-weight: normal;
                }
                &-item {
                    display: flex;
                    padding: rpx(30) 0;
                    border-bottom: solid 1px $color2;
                    &-title {
                        flex: 1;
                        font-size: rpx(36);
                        line-height: 130%;
                    }
                    &-choose {
                        display: flex;
                        align-items: center;
                        width: rpx(180);
                        &-but {
                            width: rpx(50);
                            height: rpx(50);
                            line-height: rpx(50);
                            overflow: hidden;
                            text-align: center;
                            font-size: rpx(50)

                        }
                        &-num {
                            border: none;
                            width: rpx(80);
                            height: rpx(50);
                            background: $bgcolor1;
                            text-align: center;
                            font-size: rpx(40);
                            font-weight: bold;
                        }
                    }
                }
                &-bottom{
                    padding: rpx(30) 0 0;
                    text-align: center;
                    font-size: rpx(32);
                    font-weight: normal;
                    color: $color3;
                }
            }
        }
    }
</style>
